<template>
    <div class="common-layout">
        <el-container>
            <el-header style="border-style: groove;border-width: 1.5px;height: 80px;">
                <el-button @click="fqlc" type="success">发起流程</el-button>
                <el-button @click="dialogFormVisible = true" type="primary">设计流程</el-button>
            </el-header>
            <el-main style="border-style: groove;border-width: 1.5px;height: 560px;margin-top: 40px;">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column label="选择">
                        <template v-slot="scope">
                            <el-radio :value="scope.row" v-model="definition"></el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="流程ID" />
                    <el-table-column prop="title" label="标题" />
                    <el-table-column prop="definitionId" label="标识符" />
                    <el-table-column prop="version" label="版本号" />
                    <el-table-column prop="createName" label="申请人" />
                    <el-table-column label="操作">
                        <template v-slot="scope">
                            <el-button @click="addformdata" type="primary">设计表单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="info.pageIndex" v-model:page-size="info.pageSize"
                        next-text="下一页" :page-sizes="[3, 4, 5, 6]" :size="size" :disabled="disabled" background
                        prev-text="上一页" layout="total, sizes, prev, pager, next, jumper" :total="info.totaCount"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-main>
        </el-container>
    </div>

    <el-dialog v-model="dialogFormVisible" title="流程设计" width="500">
        <el-form :model="form">
            <el-form-item label="流程标题" :label-width="formLabelWidth">
                <el-input v-model="form.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="标识符" :label-width="formLabelWidth">
                <el-input v-model="form.definitionId" autocomplete="off" />
            </el-form-item>
            <el-form-item label="版本号" :label-width="formLabelWidth">
                <el-input v-model="form.version" autocomplete="off" />
            </el-form-item>
            <el-form-item label="是否设置审批步骤" :label-width="formLabelWidth">
                <el-radio-group v-model="hhh">
                    <el-radio :value="0">暂不设置审批步骤</el-radio>
                    <el-radio :value="1" @click="openstep = true">设置审批步骤</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="adddefinition">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="openstep" title="设置审批步骤" width="1200">
        <el-button @click="addrowdefint" type="success">加一行</el-button>
        <el-table :data="form.steps" border style="width: 100%">
            <el-table-column prop="date" label="步骤ID" width="180">
                <template v-slot="scope">
                    <el-input v-model="scope.row.stepId" autocomplete="off" />
                </template>
            </el-table-column>
            <el-table-column prop="date" label="步骤名称" width="180">
                <template v-slot="scope">
                    <el-input v-model="scope.row.stepName" autocomplete="off" />
                </template>
            </el-table-column>
            <el-table-column prop="date" label="审批人ID" width="180">
                <template v-slot="scope">
                    <el-select v-model="scope.row.auditId">
                        <el-option label="请选择审批人ID" value="" />
                        <el-option v-for="item in tableData1" :label="item.userLickname" :value="item.id" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="审批人" width="180">
                <template v-slot="scope">
                    <el-select v-model="scope.row.auditName">
                        <el-option label="请选择审批人" value="" />
                        <el-option v-for="item in tableData1" :label="item.userLickname" :value="item.userLickname" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="下一步骤" width="180">
                <template v-slot="scope">
                    <el-input v-model="scope.row.nextStep" autocomplete="off" />
                </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" width="180">
                <template v-slot="scope">
                    <el-button @click="delrowdefint(scope.row.$index)" type="danger">删一行</el-button>
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="openstep = false">取消</el-button>
                <el-button type="primary" @click="openstep = false">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="openformdata" title="设计表单" width="1200">
        <el-button @click="addrowformdata" type="success">加一行</el-button>
        <el-table :data="data.formdata" border style="width: 100%">
            <el-table-column label="字段名称" width="180">
                <template v-slot="scope">
                    <el-input v-model="scope.row.formDataName" autocomplete="off" />
                </template>
            </el-table-column>
            <el-table-column label="字段默认值" width="180">
                <template v-slot="scope">
                    <el-input v-model="scope.row.formDataDefault" autocomplete="off" />
                </template>
            </el-table-column>
            <el-table-column label="字段类型" width="180">
                <template v-slot="scope">
                    <el-select v-model="scope.row.formDataType" placeholder="请选择字段类型">
                        <el-option label="文本框" :value="0" />
                        <el-option label="日期选择器" :value="1" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template v-slot="scope">
                    <el-button @click="delrowformdata(scope.row.$index)" type="danger">删一行</el-button>
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="openformdata = false">取消</el-button>
                <el-button type="primary" @click="addformdata">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="addinstance" title="发起流程" width="500">
        <el-form :model="formdata">
            <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="instance.title" autocomplete="off" />
            </el-form-item>


            <el-form-item v-for="item in formdata" :label="item.FormDataName" :label-width="formLabelWidth">
                <el-input v-model="item.FormDataDefault" autocomplete="off" v-if="item.FormDataType == 0" />
                <el-input v-model="item.FormDataDefault" autocomplete="off" type="date" v-else />
            </el-form-item>


        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addinstance = false">取消</el-button>
                <el-button type="primary" @click="addinstan">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { reactive, ref, onMounted, watch } from 'vue';
import { ElMessage, type ComponentSize } from 'element-plus'
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()

const hhh: any = ref(0)
const size = ref<ComponentSize>('default')
const disabled = ref(false)
const openstep = ref(false)
const openformdata = ref(false)


const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

onMounted(() => {
    show()
    xlk()
})

const instance: any = reactive({
    "definitionId": "",
    "version": '',
    "title": "",
    "formData": "",
    "createName": store.userInfo.userLickname
})



const addinstance: any = ref(false)
const fqlc = () => {
    if (definition.value.length == 0) {
        ElMessage.warning("请选择要操作的流程设计");
        return
    }
    if (definition.value.formData == null) {
        ElMessage.error("请先设计表单");
        return
    }
    else {
        addinstance.value = true
        formdata.value = JSON.parse(definition.value.formData)
    }
}

const data: any = reactive({
    "definitionId": "",
    "version": '',
    "formdata": [
        {
            "formDataName": "",
            "formDataDefault": "",
            "formDataType": ""
        }
    ]
})

const formdata: any = ref([
    {
        "FormDataName": "",
        "FormDataDefault": "",
        "FormDataType": ""
    }
])

console.log(formdata.value);

const addrowformdata = () => {
    data.formdata.push({
        "formDataName": "",
        "formDataDefault": "",
        "formDataType": ""
    })
}
const delrowformdata = (index: any) => {
    data.formdata.splice(index, 1);
}



const addformdata = () => {

    data.definitionId = definition.value.definitionId
    data.version = definition.value.version
    openformdata.value = true
    axios({
        url: 'http://59.110.123.186:4406/api/Management/FormDataAdd',
        method: 'post',
        data: data
    })
        .then(res => {
            if (res.data.code == 100) {
                ElMessage.success(res.data.message);
                show();
                openformdata.value = false
            }
        })
}

const addinstan = () => {
    instance.definitionId = definition.value.definitionId
    instance.version = definition.value.version
    instance.formData = JSON.stringify(formdata.value)
    axios({
        url: 'http://59.110.123.186:4406/api/Management/InstanceAdd',
        method: 'post',
        data: instance
    })
        .then(res => {
            if (res.data.code == 100) {
                ElMessage.success(res.data.message);
                show();
                addinstance.value = false
            }
            else {
                ElMessage.error("添加失败");
                addinstance.value = false
            }
        })
}

const adddefinition = () => {
    axios({
        url: 'http://59.110.123.186:4406/api/Management/DefinitionAdd',
        method: 'post',
        data: form
    })
        .then(res => {
            if (res.data.code == 100) {
                ElMessage.success(res.data.message);
                show();
                dialogFormVisible.value = false
            }
        })
}

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const addrowdefint = () => {
    form.steps.push({
        "stepId": "",
        "stepName": "",
        "auditId": '',
        "auditName": "",
        "nextStep": ""
    })
}
const delrowdefint = (index: any) => {
    form.steps.splice(index, 1);
}

const form = reactive({
    "definitionId": "",
    "version": '',
    "title": "",
    "createName": store.userInfo.userLickname,
    "steps": [
        {
            "stepId": "",
            "stepName": "",
            "auditId": '',
            "auditName": "",
            "nextStep": ""
        }
    ]
})


const definition: any = ref([])

const tableData: any = ref([])

const info: any = reactive({
    pageIndex: 1,
    pageSize: 3,
    totaCount: 0,
    pageCount: 0,
})

const tableData1: any = ref([])
const xlk = () => {
    axios({
        url: 'http://59.110.123.186:4405/api/Management/UserShow',
        method: 'get',
    })
        .then(res => {
            tableData1.value = res.data.data
        })
}


const show = () => {
    axios({
        url: 'http://59.110.123.186:4405/api/Management/DefinitionShow',
        method: 'get',
        params: {
            pageIndex: info.pageIndex,
            pageSize: info.pageSize
        }
    })
        .then(res => {
            tableData.value = res.data.data.pageData
            info.totaCount = res.data.data.totaCount
            info.pageCount = res.data.data.pageCount

        })
}

watch(info, () => {
    show()
}, { deep: true })
</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>